<template>
  <div>
    <mt-header title="营业资质">
      <router-link style="text-decoration: none;" to="#" slot="left" @click="goback">
        <span class="iconfont icon-go-back"></span>
      </router-link>
    </mt-header>
    <div class="bq-container">
      <p class="title">商家从业资质</p>
      <div class="flex-row-center" v-if="images.length > 0">
        <div @click="largeImg(image)" v-for="(image, index) in images" :key="index" class="bq-item">
          <img-format :src="image" />
        </div>
      </div>
    </div>
    <div class="large-img" @click="showLarge = false" v-if="showLarge">
      <img-format :scr="largeUrl" class="large-img_area" />
    </div>
  </div>
</template>

<script>
import{ getBusQual } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'business-qualification',
  data() {
    return {
      req: {
        shopId: '',
        lat: '',
        lng: ''
      },
      shopId:'',
      images: [],
      showLarge: false,
      largeUrl:''
    }
  },
  components: {
    ImgFormat
  },
  async created() {
    const query = this.$route.query
    const { id, latitude, longitude } = JSON.parse(query)
    this.shopId = '' + id
    this.req.shopId = id
    this.req.lat = latitude
    this.req.lng = longitude
    try {
      const {data} = await getBusQual(this.req)
      this.images = data.images
    }catch(e) {
      this.$toast('获取数据异常，请稍后再试', 'center')
    }
  },
  methods: {
    largeImg(url) {
      this.largeUrl = url
      this.showLarge = true
    },
    goback() {
      history.back()
    }
  }
}
</script>

<style scoped>
  .bq-container {
    padding: 20px;
    background-color: #fff;
    margin: 15px;
  }
  .title {
    margin: 10px;
    font-size: 32px;
    font-weight: 600;
  }
  .bq-item {
    margin: 20px;
    width: 48%;
    height: 200px;
    border: 1px solid #666;
    display: flex;
    justify-content: center;
  }
  .large-img {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 80px);
    background-color: rgba(0, 0, 0, .5);
  }
  .large-img_area {
    height: 100%;
    width: 100%;
  }
</style>
